<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center;background-color: #B41515">
    <div style="display: flex; background-color: white; width: 50%;border-radius: 5px;overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/loginPic.png" alt="加载失败" style="width: 100%;height: 100%">
      </div>

      <div style="flex: 1; display:  flex; align-items: center; justify-content: center" >
      <el-form :model="user" style="width: 80%" :rules="rules" ref="loginRef">
        <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px" >欢迎登陆</div>
        <el-form-item prop="username">
          <el-input placeholder="请输入账号" v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input show-password placeholder="请输入密码" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <div style="display: flex">
            <el-input placeholder="请输入验证码" style="flex: 1" v-model="user.code"></el-input>
            <div style="flex: 1; height: 36px">
              <valid-code @update:value="getCode"/>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
        </el-form-item>
        <div style="display: flex;font-size: 10px">
          <div style="flex: 1 ">还没有账号 请<span  style="color: lightskyblue; cursor: pointer" @click="$router.push('/register',()=>{},()=>{})">注册</span> </div>
          <div style="flex: 1; text-align: right"><span style="color: lightskyblue;
          cursor: pointer"
          @click="handleForgetPass"
          >忘记密码</span> </div>
        </div>
      </el-form>
    </div>
    </div>

  <el-dialog title="忘记密码" :visible.sync="forgetPassDialog" width="30%">
    <el-form :rules="codeRules" ref="codeRef" :model="forgetUserForm"  label-width="80px" style="padding-right: 20px">
      <el-form-item prop="email" label="邮件">
        <el-input  @change="getEmail" v-model = "forgetUserForm.email" auto-complete="false" placeholder="输入邮件"></el-input>
      </el-form-item>

      <el-form-item prop="code" label="验证码">
        <div style="display: flex">
          <el-input style="display: inline-block" v-model="forgetUserForm.code" auto-complete="false" placeholder="输入验证码"></el-input>
          <div style="flex: 1; height: 36px">
            <el-button  @click="sendEmailCode" size="small" style="display: inline-block; margin-left: 20px" type="success">
              发送验证码</el-button>
          </div>
        </div>

      </el-form-item>
      <el-form-item prop="newPassword" label="重置密码">
        <el-input v-model="forgetUserForm.newPassword" auto-complete="false" placeholder="输入重置密码"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="forgetPassDialog = false">取 消</el-button>
      <el-button type="primary" @click="resetPassword">确 定</el-button>
    </div>

  </el-dialog>


  </div>
</template>

<script>
import {defineComponent} from 'vue'
import ValidCode from "@/components/ValidCode.vue";
import router from "@/router";
import {setRoute, setRoutes} from "../router";

export default {
  name: "Login",
  components: {
    ValidCode
  },
  data(){
    const validateCode = (rule, value, callback) =>{
      if(value === ''){
        callback(new Error('请输入验证码'))
      } else  if (value !== this.code){
        callback(new Error('验证码错误'))
      } else {
        callback()
      }
    }

    return {
      forgetPassDialog: false,
      forgetUserForm: {},
      code: '',
      user: {
        username: '',
        password: '',
        code: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        code: [
          {validator: validateCode, trigger: 'blur'}
        ]
      },
      codeRules: {
        email: [
          {required: true, message: '请输入邮件', trigger: 'blur'},
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入重置密码', trigger: 'blur'},
        ],
      },
      email:'',
    }
  },
  methods: {
    resetPassword(){
     this.$request.put('/resetPassword',this.forgetUserForm).then(res => {
       if(res.code === '200'){
         this.$message.success("更新成功");
         this.forgetPassDialog = false;
         this.$router.go(0)
       } else {
         this.$message.error(res.msg);
       }
     })
    },
    handleForgetPass(){
      this.forgetUserForm = {}
      this.forgetPassDialog = true
    },
    router() {
      return router
    },
    login(){
        this.$refs['loginRef'].validate((valid) => {
            if(valid){
              this.$request.post('/login',this.user).then(res=>{
                if(res.code === '200'){

                  this.$message.success('登录成功')
                  localStorage.setItem('user',JSON.stringify(res.data))
                  if(res.data.role=='管理员'){
                    this.$router.push('/controller',()=>{},()=>{})
                  }else {
                    this.$router.push('/',()=>{},()=>{})
                  }


                } else{
                  this.$message.error(res.msg)
                }
              })
            }

        })

    },
    getCode(code){
      console.log(code)
      this.code = code
    },
    sendEmailCode(){
      this.$request.post('/sendEmail/'+this.email).then(res=>{
        if(res.code == 200){
          this.$message.success("发送成功请注意接收")
        }else {
          this.$message.success("邮件发送失败")
        }
      })
        console.log(this.email)
    },
    getEmail(){
      this.email = this.forgetUserForm.email
    }
  }
}
</script>

<style scoped>

</style>